<template>
	<view class="container">
		<!-- 固定头部区域 -->
		<view class="fixed-header">
			<!-- 连接状态 -->
			<view class="connection-status" :class="wsConnected ? 'connected' : 'disconnected'">
				<text class="status-text">{{ wsConnected ? '实时连接已建立' : '连接中...' }}</text>
				<view class="refresh-btn" @click="refreshAlerts">
					<uni-icons type="refresh" size="20" color="#ffffff"></uni-icons>
				</view>
			</view>
			
			<!-- 告警统计 -->
			<view class="alert-stats">
				<view class="stat-item" :class="{ 
					active: currentFilter === 'all',
					highlight: highlightAllCategory 
				}" @click="filterAlerts('all')">
					<text class="stat-label" :class="{ 
						active: currentFilter === 'all',
						highlight: highlightAllCategory 
					}">全部</text>
					<text class="stat-count" :class="{ 
						active: currentFilter === 'all',
						highlight: highlightAllCategory 
					}">{{ alertStats.total }}</text>
				</view>
				<view class="stat-item" :class="{ active: currentFilter === 'unhandled' }" @click="filterAlerts('unhandled')">
					<text class="stat-label" :class="{ active: currentFilter === 'unhandled' }">未处理</text>
					<text class="stat-count" :class="{ active: currentFilter === 'unhandled' }">{{ alertStats.unhandled }}</text>
				</view>
				<view class="stat-item" :class="{ active: currentFilter === 'confirmed' }" @click="filterAlerts('confirmed')">
					<text class="stat-label" :class="{ active: currentFilter === 'confirmed' }">已确认</text>
					<text class="stat-count" :class="{ active: currentFilter === 'confirmed' }">{{ alertStats.confirmed }}</text>
				</view>
				<view class="stat-item" :class="{ active: currentFilter === 'handled' }" @click="filterAlerts('handled')">
					<text class="stat-label" :class="{ active: currentFilter === 'handled' }">已处理</text>
					<text class="stat-count" :class="{ active: currentFilter === 'handled' }">{{ alertStats.handled }}</text>
				</view>
			</view>
		</view>
		
		<!-- 滚动进度条（独立于固定头部） -->
		<view class="scroll-progress-bar" v-if="scrollHeight > scrollViewHeight">
			<view class="progress-fill" :style="{ width: (scrollProgress * 100) + '%' }"></view>
		</view>
		
		<!-- 可滚动的告警列表区域 -->
		<scroll-view 
			scroll-y="true"
			class="alert-list" 
			@scroll="onScroll"
			@scrolltolower="onScrollToLower"
			:scroll-top="scrollTop"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRefreshRestore"
			:style="{ height: '100%' }"
		>
			<view class="alert-item" v-for="alert in paginatedAlerts" :key="alert.alertId" :class="getIndicatorClass(alert)" @click="showAlertDetail(alert)" :data-level="alert.level">
				<view class="alert-header">
					<view class="alert-level" :class="getLevelClass(alert.level)">
						<text class="level-text">{{ alertStore.getAlertLevelText(alert.level) }}</text>
					</view>
					<text class="alert-time">{{ formatTime(alert.time) }}</text>
				</view>
				<view class="alert-content">
					<text class="alert-title">{{ alert.title }}</text>
					<text class="alert-desc">{{ alert.description }}</text>
				</view>
				<view class="alert-footer">
					<view class="alert-data">
						<text class="data-item">当前值: {{ alert.currentValue }}</text>
						<text class="data-item">正常范围: {{ alert.normalRange }}</text>
						<text class="data-item">设备ID: {{ alert.deviceId }}</text>
					</view>
					<view class="alert-status" :class="getStatusClass(alert.status)">
						<text>{{ alertStore.getAlertStatusText(alert.status) }}</text>
					</view>
				</view>
			</view>
			
			<!-- 懒加载提示 -->
			<view class="auto-loading-tip" v-if="isLoadingMore">
				<uni-icons type="spinner-cycle" size="16" color="#3498db"></uni-icons>
				<text>正在加载更多数据...</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view class="no-more-data" v-if="!hasMoreAlerts && paginatedAlerts.length > 0">
				<text>没有更多告警数据了</text>
			</view>
			
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useAlertStore } from '@/stores/alert.js'

// 响应式数据
const currentFilter = ref('all')
const wsConnected = ref(false)

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(3) // 每页3条数据
const isLoadingMore = ref(false)
const isRefreshing = ref(false)
const allAlerts = ref([]) // 存储所有告警数据（兼容性保留）
const totalCount = ref(0) // 总数据量

// 统计数据 - 从store获取
const alertStats = computed(() => {
	const stats = alertStore.alertStats
	console.log('📊 统计数据更新:', stats)
	return stats
})

// 高亮效果状态
const highlightAllCategory = ref(false)

// 滚动优化相关
const scrollTop = ref(0)
const scrollHeight = ref(0) // 滚动区域总高度
const scrollViewHeight = ref(0) // 可视区域高度
const scrollProgress = ref(0) // 滚动进度 (0-1)
const isNearBottom = ref(false) // 是否接近底部
const lastLoadTime = ref(0) // 上次加载时间，用于防抖
const isScrolling = ref(false) // 是否正在滚动，用于防抖
const scrollTimer = ref(null) // 滚动定时器

// 使用alert store
const alertStore = useAlertStore()

// 调试信息
console.log('告警状态管理已初始化:', alertStore)

// 从store获取数据
const alertList = computed(() => alertStore.alertList)

// 获取统计数据（从后端获取所有告警的真实统计）
const loadAlertStats = async () => {
	try {
		console.log('📊 正在获取告警统计数据...')
		
		const response = await uni.request({
			url: 'http://localhost:8891/Alert/stats',
			method: 'GET'
		})
		
		console.log('📊 统计数据响应:', response.data)
		
		if (response.data && response.data.code === 200) {
			// 直接更新store中的统计数据
			alertStore.alertStats = response.data.obj
			console.log('✅ 统计数据加载完成:', alertStore.alertStats)
		} else {
			throw new Error(response.data?.msg || '统计数据加载失败')
		}
	} catch (error) {
		console.error('❌ 获取统计数据失败:', error)
		uni.showToast({
			title: '统计数据加载失败',
			icon: 'none'
		})
	}
}

// 计算属性 - 过滤后的告警列表（基于store数据）
const filteredAlerts = computed(() => {
	// 使用store中的数据作为主要数据源
	let alerts = alertStore.alertList
	
	if (currentFilter.value !== 'all') {
		// 映射过滤条件到状态值
		const statusMap = {
			'unhandled': 1,
			'confirmed': 2,
			'handled': 3
		}
		
		const targetStatus = statusMap[currentFilter.value]
		alerts = alerts.filter(alert => alert.status === targetStatus)
	}
	
	// 按创建时间降序排序（最新的在前面）
	return alerts.sort((a, b) => {
		const timeA = new Date(a.createTime || a.time).getTime()
		const timeB = new Date(b.createTime || b.time).getTime()
		return timeB - timeA // 降序排列
	})
})

// 计算属性 - 分页后的告警列表（累积显示）
const paginatedAlerts = computed(() => {
	// 使用过滤后的告警列表进行本地分页
	const alerts = filteredAlerts.value
	
	// 累积显示：显示从第1页到当前页的所有数据
	const endIndex = currentPage.value * pageSize.value
	const paginatedData = alerts.slice(0, endIndex)
	
	console.log('📄 分页计算（累积显示）:', { 
		currentPage: currentPage.value, 
		pageSize: pageSize.value, 
		endIndex, 
		totalAlerts: alerts.length,
		displayedAlerts: paginatedData.length,
		alerts: paginatedData.map(a => ({ id: a.alertId, title: a.title }))
	})
	return paginatedData
})

// 计算属性 - 是否还有更多数据
const hasMoreAlerts = computed(() => {
	const currentDisplayed = currentPage.value * pageSize.value
	const totalAvailable = filteredAlerts.value.length
	const hasMore = currentDisplayed < totalAvailable
	console.log('📊 检查是否还有更多数据:', { 
		currentPage: currentPage.value, 
		pageSize: pageSize.value, 
		currentDisplayed, 
		totalAvailable,
		hasMore
	})
	return hasMore
})

// 加载告警数据
const loadAlerts = async (page = 1, isLoadMore = false) => {
	try {
		console.log('📡 正在从数据库加载告警数据...', `页码: ${page}, 每页: ${pageSize.value}`)
		
		// 调用后端API获取所有数据（不分页）
		const response = await uni.request({
			url: 'http://localhost:8891/Alert/list',
			method: 'GET',
			data: {
				page: 1,
				pageSize: 1000, // 获取大量数据，由前端分页
				status: currentFilter.value === 'all' ? null : currentFilter.value
			}
		})
		
		console.log('🔍 后端响应数据:', response.data)
		
		if (response.data && response.data.code === 200) {
			console.log('🔍 后端返回的数据:', response.data.obj)
			const { data, total } = response.data.obj
			
			// 转换后端数据格式为前端格式
			const formattedData = data.map(item => {
				// 翻译指标代码为中文
				const indicatorMap = {
					'TEMP': '温度',
					'TEMPERATURE': '温度',
					'TURBIDITY': '浊度',
					'PH': 'pH值'
				}
				const chineseIndicator = indicatorMap[item.indicatorCode] || item.indicatorCode
				
				return {
					alertId: item.anomalyId || item.id,
					title: chineseIndicator + '异常',
					description: chineseIndicator + '值 ' + item.currentValue + ' 超出正常范围 ' + item.normalRange,
					deviceId: item.deviceId,
					currentValue: item.currentValue,
					normalRange: item.normalRange,
					level: item.severity || 'low',
					status: item.handleStatus || 1,
					time: item.createTime,
					createTime: item.createTime
				}
			})
			
			// 直接更新store中的数据（总是替换，不追加）
			alertStore.setAlertList(formattedData)
			
			// 同时更新页面中的allAlerts用于兼容性
			allAlerts.value = formattedData
			
			totalCount.value = total
			currentPage.value = 1 // 重置为第一页，由前端分页控制
			
			console.log('✅ 告警数据加载完成', `总数据: ${formattedData.length}, 总数: ${total}`)
		} else {
			throw new Error(response.data?.msg || '数据加载失败')
		}
	} catch (error) {
		console.error('❌ 加载告警数据失败:', error)
		uni.showToast({
			title: '数据加载失败',
			icon: 'none'
		})
	}
}

// 滚动事件处理
const onScroll = (e) => {
	const { scrollTop: currentScrollTop, scrollHeight: currentScrollHeight, scrollViewHeight: currentScrollViewHeight } = e.detail
	
	// 设置滚动状态
	isScrolling.value = true
	
	// 更新滚动信息
	scrollTop.value = currentScrollTop
	scrollHeight.value = currentScrollHeight
	scrollViewHeight.value = currentScrollViewHeight
	
	// 计算滚动进度
	if (currentScrollHeight > currentScrollViewHeight) {
		scrollProgress.value = currentScrollTop / (currentScrollHeight - currentScrollViewHeight)
	} else {
		scrollProgress.value = 0
	}
	
	// 判断是否接近底部（距离底部100px以内，更精确的触发）
	const distanceToBottom = currentScrollHeight - currentScrollTop - currentScrollViewHeight
	isNearBottom.value = distanceToBottom <= 100
	
	console.log('📊 滚动进度:', {
		scrollTop: currentScrollTop,
		scrollHeight: currentScrollHeight,
		scrollViewHeight: currentScrollViewHeight,
		progress: Math.round(scrollProgress.value * 100) + '%',
		distanceToBottom: Math.round(distanceToBottom),
		isNearBottom: isNearBottom.value
	})
	
	// 清除之前的定时器
	clearTimeout(scrollTimer.value)
	
	// 懒加载：接近底部时自动加载更多数据（滚动停止后触发）
	if (isNearBottom.value && hasMoreAlerts.value && !isLoadingMore.value) {
		scrollTimer.value = setTimeout(() => {
			const now = Date.now()
			if (now - lastLoadTime.value > 2000) {
				console.log('🔄 懒加载触发：接近底部，自动加载更多数据')
				lastLoadTime.value = now
				loadMoreAlerts()
			}
		}, 300) // 滚动停止300ms后触发
	}
}

// 滚动到底部事件处理（懒加载）
const onScrollToLower = () => {
	console.log('🔍 滚动到底部触发懒加载', {
		hasMoreAlerts: hasMoreAlerts.value,
		isLoadingMore: isLoadingMore.value
	})
	
	// 如果没有更多数据或正在加载，直接返回
	if (!hasMoreAlerts.value || isLoadingMore.value) {
		console.log('❌ 没有更多数据或正在加载中')
		return
	}
	
	// 添加防抖，避免频繁触发
	const now = Date.now()
	if (now - lastLoadTime.value > 2000) {
		lastLoadTime.value = now
		loadMoreAlerts()
	}
}

// 加载更多告警数据（彻底防止回弹）
const loadMoreAlerts = async () => {
	// 检查是否有更多数据和是否正在加载
	if (!hasMoreAlerts.value || isLoadingMore.value) {
		console.log('❌ 没有更多数据可加载或正在加载中')
		return
	}
	
	try {
		isLoadingMore.value = true
		console.log('📡 懒加载：正在加载更多告警数据...', `当前页码: ${currentPage.value}`)
		
		// 直接增加页码，不操作滚动位置
		currentPage.value += 1
		
		// 等待数据更新完成
		await new Promise(resolve => setTimeout(resolve, 100))
		
		console.log('✅ 懒加载完成，当前页码:', currentPage.value, '显示数据:', paginatedAlerts.value.length, '条')
	} catch (error) {
		console.error('❌ 懒加载失败:', error)
		// 如果出错，回退页码
		currentPage.value -= 1
		uni.showToast({
			title: '加载更多失败',
			icon: 'none'
		})
	} finally {
		isLoadingMore.value = false
		console.log('🔄 懒加载状态已重置，可以继续滚动')
	}
}

// 处理实时告警推送
// 实时告警处理已移至store中统一管理，这里不再需要单独处理

// 触发"全部"分类高亮效果（当有实时告警推送时）
const triggerAllCategoryHighlight = () => {
	console.log('🔴 触发全部分类高亮效果')
	highlightAllCategory.value = true
	
	// 1000毫秒后开始淡去
	setTimeout(() => {
		highlightAllCategory.value = false
		console.log('🔴 全部分类高亮效果结束')
	}, 1000)
}


// 页面加载
onMounted(async () => {
	try {
		// 并行加载告警数据和统计数据
		await Promise.all([
			loadAlerts(),
			loadAlertStats()
		])
		
		// 启用WebSocket连接
		alertStore.initWebSocketConnection()
		
		// 监听WebSocket实时告警（通过事件监听）
		// 注意：store已经处理了WebSocket消息，这里只需要处理高亮效果
		window.addEventListener('newAlert', (event) => {
			console.log('📡 页面收到新告警事件:', event.detail)
			// 只处理高亮效果，不重复添加告警数据
			if (currentFilter.value !== 'all') {
				triggerAllCategoryHighlight()
			}
		})
		
		// 监听连接状态变化
		setTimeout(() => {
			debugAlertLevels()
			debugStats()
		}, 1000)
		watch(() => alertStore.wsConnected, (newVal) => {
			wsConnected.value = newVal
			console.log('WebSocket连接状态变化:', newVal)
		}, { immediate: true })
	} catch (error) {
		console.error('页面初始化失败:', error)
	}
})

// 页面卸载时关闭WebSocket连接和清理定时器
onUnmounted(() => {
	alertStore.closeWebSocketConnection()
	// 清理滚动定时器
	if (scrollTimer.value) {
		clearTimeout(scrollTimer.value)
	}
})

// 过滤告警（移除防抖机制，让过滤响应更即时）
const filterAlerts = async (filter) => {
	currentFilter.value = filter
	currentPage.value = 1 // 重置页码
	console.log('正在过滤告警:', filter, '页码重置为1')
	
	// 重新加载数据和统计数据
	await Promise.all([
		loadAlerts(1, false),
		loadAlertStats()
	])
	
	console.log('✅ 过滤完成，当前显示数据:', paginatedAlerts.value.length, '条')
}

// 调试告警级别
const debugAlertLevels = () => {
	console.log('🔍 正在调试告警级别:')
	filteredAlerts.value.forEach((alert, index) => {
		console.log(`告警 ${index + 1}:`, {
			title: alert.title,
			level: alert.level,
			levelType: typeof alert.level,
			class: `level-${alert.level}`
		})
	})
}

// 调试统计数据
const debugStats = () => {
	console.log('📊 调试统计数据:')
	console.log('Store中的alertList长度:', alertStore.alertList.length)
	console.log('Store中的alertStats:', alertStore.alertStats)
	console.log('页面中的allAlerts长度:', allAlerts.value.length)
	console.log('页面中的alertStats:', alertStats.value)
	
	// 检查是否有重复的告警
	const alertIds = alertStore.alertList.map(alert => alert.alertId)
	const uniqueIds = new Set(alertIds)
	if (alertIds.length !== uniqueIds.size) {
		console.warn('⚠️ 发现重复的告警ID:', {
			total: alertIds.length,
			unique: uniqueIds.size,
			duplicates: alertIds.length - uniqueIds.size
		})
	}
}

// 获取级别样式类
const getLevelClass = (level) => {
	// 如果已经是字符串，直接返回
	if (typeof level === 'string') {
		return level
	}
	
	// 如果是数字，转换为字符串
	const levelMap = {
		1: 'low',
		2: 'medium', 
		3: 'high'
	}
	return levelMap[level] || 'low'
}

// 获取状态样式类
const getStatusClass = (status) => {
	const statusMap = {
		1: 'unhandled',
		2: 'confirmed',
		3: 'handled'
	}
	return statusMap[status] || 'unhandled'
}

// 显示告警详情
const showAlertDetail = (alert) => {
	console.log('🔍 正在点击告警项:', alert)
	console.log('🔍 告警ID:', alert.alertId)
	
	if (!alert.alertId) {
		uni.showToast({
			title: '告警ID不存在',
			icon: 'none'
		})
		return
	}
	
	uni.navigateTo({
		url: `/pages/alert/detail?id=${alert.alertId}`,
		success: () => {
			console.log('✅ 页面跳转成功')
		},
		fail: (err) => {
			console.error('❌ 页面跳转失败:', err)
			uni.showToast({
				title: '页面跳转失败',
				icon: 'none'
			})
		}
	})
}

// 处理告警
const handleAlert = (alert) => {
	alertStore.handleAlert(alert.alertId, 'current_user')
	
	uni.showToast({
		title: '处理成功',
		icon: 'success'
	})
}

// 批量处理告警
const handleAllAlerts = () => {
	uni.showModal({
		title: '批量处理',
		content: '确定要批量处理所有未处理的告警吗？',
		success: (res) => {
			if (res.confirm) {
				const unhandledAlerts = alertList.value.filter(alert => alert.status === 1)
				unhandledAlerts.forEach(alert => {
					alertStore.handleAlert(alert.alertId, 'current_user')
				})
				
				uni.showToast({
					title: '批量处理成功',
					icon: 'success'
				})
			}
		}
	})
}

// 刷新告警（移除防抖机制，允许快速连续刷新）
const refreshAlerts = async () => {
	// 移除loading状态检查，允许快速连续刷新
	uni.showLoading({ title: '刷新中...' })
	try {
		currentPage.value = 1 // 重置页码
		
		// 并行加载告警数据和统计数据
		await Promise.all([
			loadAlerts(),
			loadAlertStats()
		])
		
		uni.showToast({ title: '刷新成功', icon: 'success' })
	} catch (error) {
		uni.showToast({ title: '刷新失败', icon: 'none' })
	} finally {
		uni.hideLoading()
	}
}

// 下拉刷新（移除防抖机制，允许快速连续刷新）
const onRefresh = async () => {
	// 移除isRefreshing状态检查，允许快速连续刷新
	try {
		isRefreshing.value = true
		console.log('🔄 正在执行下拉刷新...')
		
		// 重置页码并重新加载第一页数据
		currentPage.value = 1
		
		// 并行加载告警数据和统计数据
		await Promise.all([
			loadAlerts(1, false),
			loadAlertStats()
		])
		
		console.log('✅ 下拉刷新完成')
	} catch (error) {
		console.error('❌ 下拉刷新失败:', error)
		uni.showToast({
			title: '刷新失败',
			icon: 'none'
		})
	} finally {
		isRefreshing.value = false
	}
}

// 下拉刷新恢复
const onRefreshRestore = () => {
	console.log('🔄 下拉刷新状态恢复')
}



// 获取告警级别文本
const getLevelText = (level) => {
	const levelMap = {
		low: '低',
		medium: '中',
		high: '高'
	}
	return levelMap[level] || '低'
}

// 获取指标类型对应的CSS类
const getIndicatorClass = (alert) => {
	// 从标题中提取指标类型
	const title = alert.title || ''
	if (title.includes('温度')) {
		return 'indicator-temp'
	} else if (title.includes('浊度')) {
		return 'indicator-turbidity'
	} else if (title.includes('pH')) {
		return 'indicator-ph'
	}
	// 默认返回温度类型
	return 'indicator-temp'
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		unhandled: '未处理',
		confirmed: '已确认',
		handled: '已处理'
	}
	return statusMap[status] || '正常'
}

// 格式化时间
const formatTime = (time) => {
	const date = new Date(time)
	const year = date.getFullYear()
	const month = (date.getMonth() + 1).toString().padStart(2, '0')
	const day = date.getDate().toString().padStart(2, '0')
	const hours = date.getHours().toString().padStart(2, '0')
	const minutes = date.getMinutes().toString().padStart(2, '0')
	return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 组件挂载时初始化
onMounted(async () => {
	console.log('🚀 告警页面初始化开始')
	
	// 重置页码
	currentPage.value = 1
	
	// 并行加载告警数据和统计数据
	await Promise.all([
		loadAlerts(1, false),
		loadAlertStats()
	])
	
	// 调试信息
	setTimeout(() => {
		debugStats()
	}, 1000)
	
	console.log('✅ 告警页面初始化完成')
})
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f7fa;
	/* 允许滚动，移除overflow: hidden */
	/* 确保文字正常显示 */
	direction: ltr;
	writing-mode: horizontal-tb;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #f5f7fa;
}

.connection-status {
	padding: 10rpx 20rpx; /* 减少上下内边距，让连接状态栏变短 */
	text-align: center;
	border-radius: 0 0 12rpx 12rpx;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
	&.connected {
		background: #d5f4e6;
		color: #27ae60;
	}
	
	&.disconnected {
		background: #ffebee;
		color: #e74c3c;
	}
}

.refresh-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50rpx;
	height: 50rpx;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transition: all 0.3s;
	backdrop-filter: blur(10rpx);
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	
	&:active {
		transform: translateY(-50%) scale(0.9);
		background: rgba(255, 255, 255, 0.5);
	}
}


.status-text {
	font-size: 24rpx;
	font-weight: 500;
}

// 滚动进度条样式
.scroll-progress-bar {
	height: 4rpx;
	background: #e9ecef;
	position: fixed;
	top: 180rpx; /* 紧贴固定头部下方 */
	left: 0;
	right: 0;
	z-index: 99; /* 确保在内容之上，但在固定头部之下 */
	border-radius: 0;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #2196f3, #21cbf3);
	border-radius: 2rpx;
	transition: width 0.1s ease-out;
	position: relative;
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 20rpx;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
	}
}

.alert-stats {
	display: flex;
	background: #ffffff;
	padding: 20rpx;
	margin: 30rpx 0 20rpx 0; /* 增加顶部边距，避免与标题栏叠加 */
	gap: 15rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25rpx 15rpx;
	border-radius: 12rpx;
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	transition: all 0.3s;
	
	&:active {
		background: #e9ecef;
		transform: scale(0.98);
	}
	
	// 激活状态样式
	&.active {
		background: #e3f2fd;
		border-color: #2196f3;
		box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.2);
	}
	
	// 高亮效果样式
	&.highlight {
		background: #ffebee !important;
		border-color: #e74c3c !important;
		box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3) !important;
		animation: highlightPulse 1s ease-out;
	}
}

.stat-label {
	font-size: 22rpx;
	color: #7f8c8d;
	margin-bottom: 8rpx;
	font-weight: 500;
	transition: color 0.3s;
	
	// 激活状态文字颜色
	&.active {
		color: #2196f3;
	}
	
	// 高亮效果文字颜色
	&.highlight {
		color: #e74c3c !important;
		font-weight: bold;
	}
}

.stat-count {
	font-size: 28rpx;
	font-weight: bold;
	color: #2c3e50;
	transition: color 0.3s;
	
	// 激活状态数字颜色
	&.active {
		color: #1976d2;
	}
	
	// 高亮效果数字颜色
	&.highlight {
		color: #e74c3c !important;
		font-weight: bold;
	}
}

.alert-list {
	flex: 1;
	padding: 10rpx 0; /* 减少左右内边距，因为卡片已有边距 */
	padding-top: 190rpx; /* 为固定头部和滚动进度条留出空间 */
	/* 滚动性能优化 */
	-webkit-overflow-scrolling: touch;
	/* 确保scroll-view可以正常滚动 */
	height: 100%;
	overflow-y: auto;
}

.alert-item {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx 25rpx; /* 减少内边距，让卡片更紧凑 */
	margin: 0 10rpx 16rpx 10rpx; /* 添加左右边距，确保右边框显示 */
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
	position: relative;
	border-left: 6rpx solid #e74c3c !important;
	border-right: 6rpx solid #e74c3c !important;
	box-sizing: border-box; /* 确保边框包含在元素宽度内 */
	/* 确保文字正常显示 */
	direction: ltr;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	/* 移除动画效果 */
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.12);
	}
	
	// 温度异常 - 橙色
	&.indicator-temp {
		border-left-color: #ff8c00 !important;
		border-right-color: #ff8c00 !important;
	}
	
	// 浊度异常 - 灰色
	&.indicator-turbidity {
		border-left-color: #95a5a6 !important;
		border-right-color: #95a5a6 !important;
	}
	
	// pH异常 - 绿色
	&.indicator-ph {
		border-left-color: #27ae60 !important;
		border-right-color: #27ae60 !important;
	}
}

.alert-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx; /* 减少头部间距 */
}

.alert-level {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-weight: bold;
	
	&.low {
		background: #d5f4e6;
		color: #27ae60;
	}
	
	&.medium {
		background: #fff3e0;
		color: #e67e22;
	}
	
	&.high {
		background: #ffebee;
		color: #e74c3c;
	}
}

.level-text {
	font-size: 20rpx;
	font-weight: bold;
}

.alert-time {
	font-size: 22rpx;
	color: #7f8c8d;
	font-weight: 500;
	/* 确保文字正常显示 */
	direction: ltr;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
}

.alert-content {
	margin-bottom: 20rpx; /* 减少内容区域间距 */
}

.alert-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 8rpx; /* 减少标题间距 */
	display: block;
}

.alert-desc {
	font-size: 24rpx;
	color: #7f8c8d;
	line-height: 1.6;
}

.alert-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20rpx; /* 进一步减少间距，避免叠加 */
	padding-right: 0; /* 移除右边距，让状态按钮有更多空间 */
}

.alert-data {
	display: flex;
	flex-direction: column;
	gap: 6rpx; /* 减少数据项间距 */
	flex: 1;
	min-width: 0;
	max-width: calc(100% - 120rpx); /* 限制最大宽度，为状态按钮留出空间 */
}

.data-item {
	font-size: 22rpx;
	color: #2c3e50;
	font-weight: 500;
	background: #f8f9fa;
	padding: 4rpx 10rpx; /* 减少数据项内边距 */
	border-radius: 8rpx;
	border-left: 3rpx solid #3498db;
}

.alert-status {
	padding: 6rpx 12rpx;
	border-radius: 15rpx;
	font-weight: bold;
	flex-shrink: 0;
	white-space: nowrap;
	margin-right: 0;
	min-width: 80rpx; /* 设置最小宽度 */
	text-align: center; /* 文字居中 */
	position: relative; /* 确保定位正确 */
	z-index: 1; /* 确保在数据区域之上 */
	
	&.unhandled {
		background: #ffebee;
		color: #e74c3c;
	}
	
	&.confirmed {
		background: #fff3e0;
		color: #e67e22;
	}
	
	&.handled {
		background: #d5f4e6;
		color: #27ae60;
	}
}


/* 自动加载相关样式 */
.auto-loading-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	padding: 20rpx;
	color: #3498db;
	font-size: 26rpx;
	background: #f8f9fa;
	margin: 20rpx;
	border-radius: 12rpx;
}

.no-more-data {
	text-align: center;
	padding: 30rpx 20rpx;
	color: #95a5a6;
	font-size: 26rpx;
}

/* 高亮动画关键帧 */
@keyframes highlightPulse {
	0% {
		background: #ffebee;
		border-color: #e74c3c;
		box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);
		transform: scale(1);
	}
	30% {
		background: #ffcdd2;
		border-color: #d32f2f;
		box-shadow: 0 6rpx 16rpx rgba(231, 76, 60, 0.4);
		transform: scale(1.02);
	}
	70% {
		background: #ffcdd2;
		border-color: #d32f2f;
		box-shadow: 0 6rpx 16rpx rgba(231, 76, 60, 0.4);
		transform: scale(1.02);
	}
	100% {
		background: #ffebee;
		border-color: #e74c3c;
		box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);
		transform: scale(1);
	}
}

</style>